<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit"> 
	<meta content="always" name="referrer">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <!--[if lt IE 9]>
			<script type="text/javascript">
				window.location.href = "tip.html"
			</script>
		<![endif]-->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/order.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/wang.js"></script>
	<style>
		.confirm .list .cheng .chenggong {
		  width: 385px;
		  margin: 0 auto;
		  overflow: hidden;
		  margin-top: 45px;
		  line-height: 60px;
		  height: 60px;
		}
		.confirm .list .cheng .chenggong img {
		  width: 60px;
		  position: relative;
		  float: left;
		  height: 60px;
		  margin-right: 10px;
		}
		.confirm .list .cheng .chenggong span {
		  margin-left: 10px;
		  font-size: 36px;
		  font-weight: bold;
		  float: left;
		}
		.confirm .list .cheng .fh {
		  font-size: 22px;
		  text-align: center;
		  margin-top: 10px;
		  padding-bottom: 80px;
		}
		.confirm .list .cheng .fh span {
		  color: #a9daf7;
		  margin: 0 10px;
		}
		#scpz{
		    float: right;
		    margin: 150px 30px 0 40px;
		    width: 225px;
		    height: 50px;
		    color: #ffffff;
		    line-height: 50px;
		    background: #ff6002;
		    text-align: center;
		    border-radius: 25px;
		}
		#demo2{
			float: left;
		}
		.uploadBtn{
			height: 220px;
			width: 300px;
		}
		#demo2 img{
			float: left;
			width: 250px;
			height: 150px;
			margin-right: 20px;
			
		}
		.confirm .uploadBtn {
			float: left;
		}
		#userName{
			float: left;
			width: 75px;
			text-align: center;
			position: relative;
			cursor: pointer;
			display: none;
		}
		#userName li:after{
			display:block;content:"";visibility:hidden;height:0;
			border-bottom:  1px solid #000000;
		}
		#userName dl{
			top: 42px;
			width: 100%;
			position: absolute;
			display: none;
			background: #fff;
			z-index: 9999;
		}
	</style>
</head>
<body>
	<div id="qq"></div>
<div class="header">
	<div class="w_1190">
		<div class="h_right fr">
			<a href="index.html">YIXA首页</a>
			<a href="dingdan.html">我的订单</a>
			<a href="zhanghu.html"></a>
			<a href="about.html">关于我们</a>
		</div>
		<div class="h_left">
			<ul id="userName">
				<li></li>
				<dl>
					<dd>退出登录</dd>
				</dl>
			</ul>
			<!-- 未登录 -->
				
				<a href="login.html" class="c_01afff" id="login">登录</a>
				<a href="register.html" class="registerno">免费注册</a>
			<!-- 已登录 -->
		</div>
	</div>
</div>
<script type="text/javascript">
	
	$("#userName").on("click",function(){
	    $(this).find("dl").slideToggle(200)
	})
	
	$("#userName dd").on("click",function(){
	    $.ajax({
	    	type:"post",
	    	url:"http://52lvu.cn:8080/api/login/logout",
	        data:{
	            userId : token.userId
	        },success : function (result){

	            
	            if (result.resultCode == 200) {
	            	localStorage.removeItem("token");
	            	window.location.href="login.html"
	            }
	            
	        },error : function (e){
	            layer.msg("请求错误，请稍后重试",{icon:2,time:2000})
	        }
	    });
	})
	
	var token = JSON.parse(localStorage.getItem('token'));
	
	if (token) {
		var expiredTime = 1800000;
		var loginTime = token.loginTime
		var nowTime = new Date().getTime();
		
		if ( (nowTime - loginTime) > expiredTime ) {
			localStorage.removeItem("token");
			window.location.href = "login.html";
		}else{
			$("#userName").show(); 
			$(".registerno").hide();
			$("#login").hide()
			$("#userName li").html(token.userName)
		}
	}else{
	    window.location.href="login.html";
	}
	
</script>

<div class="bar w-1200">
    <ul class="first">
        <li class="num"><i class="active">1</i></li>
        <li class="desc">1 选择您的客房</li>
    </ul>
    <ul class="second">
        <li class="num"><i class="active">2</i></li>
        <li class="desc">2 填写您的信息</li>
    </ul>
    <ul class="third">
        <li class="num"><i>3</i></li>
        <li class="desc">3 支付订单</li>
    </ul>
</div>

<div class="order-list w-1200">
    <div class="lift">
       <div class="head">
                <div class="title clearfloat">
                    <ul class="fl">订单详情</ul>
                    <ul class="fr">房间数量</ul>
                </div>
                <div class="container clearfloat">
                    <div class="cont-left">
                        <div class="banner">
                            <div class="wrapper" id="bannerList">

                            </div>
                        </div>
                        <div class="btn-list" id="bannerBtn">
                            
                        </div>
                        <div class="desc" id="desc">
                            <ul class="tit">果喜酒店</ul>
                            <ul class="list">
                                <li class="clearfloat">
                                    <p class="fl">房间类型：</p>
                                    <p class="fr">海景房</p>
                                </li>
                                <li class="clearfloat">
                                    <p class="fl">入住时间：</p>
                                    <p class="fr">海景房</p>
                                </li>
                                <li class="clearfloat">
                                    <p class="fl">退房时间：</p>
                                    <p class="fr">海景房</p>
                                </li>
                                <li class="clearfloat">
                                    <p class="fl">入住人数：</p>
                                    <p class="fr">海景房</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="cont-right">
                        <ul class="list" id="roomMoney">
                            
                        </ul>
                   
                    </div>
                </div>
            </div>
    </div>
</div>
<div id="infoList"></div>
<div class="pay w-1200">
    <div class="title">支付方式</div>
    <div class="list clearfloat">
        <ul class="way">
            <!--<li>
                <input type="radio" name="pay">
                <span>对公账号</span>
                <i>123456789</i>
                <em>帕劳银行</em>
            </li>
            <li>
                <input type="radio" name="pay">
                <span>其他账号</span>
                <i>123456789</i>
                <em>帕劳银行</em>
            </li>-->
        </ul>
        <ul class="desc">
                                 总计 <span id="money">￥5016</span>到店支付后，请保留好您的票据，上传发票或收据，完成订单。
        </ul>
        <ul id="bankinfo" style="margin-top: 20px;line-height: 40px;">
        	
        </ul>
        <ul class="ok" style="width: 235px;float: right;">
            <a>立即提交到店付费</a>
        </ul>
    </div>
</div>

<div class="confirm w-1200">
    <div class="title">上传凭证</div>
    <div class="list clearfloat">
		<div class="layui-upload-drag uploadBtn">
		   <i class="layui-icon">&#xe681;</i>
		   <p>点击上传，或将文件拖拽到此处</p>
		</div>
		<div id="demo2">
			
		</div>
		<div id="scpz">
			上传凭证
		</div>
    </div>
</div>

<a href="javascript:;" class="safeguard">
    <div></div>
</a>
</body>
</html>
<script src="lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ajaxSet.js" type="text/javascript" charset="utf-8"></script>
<script id="roomInfo" type="text/html">
		{{# for(var i = 0, len = d.orderDetailEntities.length ; i < len; i++){ }}
		<li class='clearfloat'>
			{{#  if(d.orderDetailEntities[i].roomType){ }}{{d.orderDetailEntities[i].roomType}}{{#  } }}
			{{#  if(d.orderDetailEntities[i].roomNum){ }}{{d.orderDetailEntities[i].roomNum}}{{#  } }}间
			{{#  if(d.orderDetailEntities[i].isBigBad == 1 ){ }}
				双人床
			{{#  } }}
			{{#  if(d.orderDetailEntities[i].isBigBad == 0 ){ }}
				单人床
			{{#  } }}
		</li>
		{{#  if(d.orderDetailEntities[i].orderPeople){ }}
		<li>
			{{#  if(d.orderDetailEntities[i].orderPeople){ }}成人{{d.orderDetailEntities[i].orderPeople}}人{{#  } }}
			{{#  if(d.orderDetailEntities[i].roomMoney){ }}*{{d.orderDetailEntities[i].roomMoney}}元{{#  } }}
			{{#  if(d.dayNum){ }}*{{d.dayNum}}天{{#  } }}
		</li>
		{{#  } }}
		{{#  if(d.orderDetailEntities[i].childNum != 0){ }}
		<li>
			{{#  if(d.orderDetailEntities[i].childNum && d.orderDetailEntities[i].childNum != 0){ }}
				儿童
			{{#  } }}
			{{#  if(d.orderDetailEntities[i].ischildBad == 0){ }}
				(不占床)
			{{#  } }}
			{{#  if(d.orderDetailEntities[i].ischildBad == 1){ }}
				(占床)
			{{#  } }}
			{{#  if(d.orderDetailEntities[i].childNum != 0){ }}
				{{d.orderDetailEntities[i].childNum}}人
			{{#  } }}
			{{#  if(d.orderDetailEntities[i].ischildBad == 0 && d.orderDetailEntities[i].childprice){ }}
				*{{d.orderDetailEntities[i].childprice}}元
			{{#  } }}
			{{#  if(d.orderDetailEntities[i].ischildBad == 1 &&  d.orderDetailEntities[i].childbedprice){ }}
				*{{d.orderDetailEntities[i].childbedprice}}元
			{{#  } }}
			{{#  if(d.dayNum && d.orderDetailEntities[i].childNum!= 0){ }}*{{d.dayNum}}天{{#  } }}
		</li>
		{{#  } }}
		{{#  if(d.orderDetailEntities[i].addBedNum != 0){ }}
		<li>
			{{#  if(d.orderDetailEntities[i].addBedNum != 0){ }}加床{{d.orderDetailEntities[i].addBedNum}}人{{#  } }}
			{{#  if(d.orderDetailEntities[i].addbedprice){ }}*{{d.orderDetailEntities[i].addbedprice}}元{{#  } }}
			{{#  if(d.dayNum && d.orderDetailEntities[i].addBedNum!= 0){ }}*{{d.dayNum}}天{{#  } }}
		</li>
		{{#  } }}
		{{#  if(d.orderDetailEntities[i].addBedNum != 0){ }}
		<li>
			{{#  if(d.orderDetailEntities[i].addBedNum != 0){ }}单房差{{d.orderDetailEntities[i].addBedNum}}人{{#  } }}
			{{#  if(d.orderDetailEntities[i].singleprice && d.orderDetailEntities[i].addBedNum != 0){ }}*{{d.orderDetailEntities[i].singleprice}}元{{#  } }}
			{{#  if(d.dayNum && d.orderDetailEntities[i].singleprice!= 0){ }}*{{d.dayNum}}天{{#  } }}
		</li>
		{{#  } }}
		<li>
			总计 {{#  if(d.orderPirce){ }}{{d.orderPirce}}元{{#  } }}
		</li>
	{{# } }}
</script>
<script id="userInfo" type="text/html">
	<div class="table-head clearfloat">
		<ul>姓名</ul>
		<ul>英文名(大写)</ul>
		<ul>性别</ul>
		<ul>出生日期</ul>
		<ul>手机号</ul>
		<ul>护照号</ul>
		<ul>护照首页</ul>
	</div>
	<div class="table-body">
		{{# for(var i = 0, len = d.length ; i < len; i++){ }}
			{{# for(var j = 0; j < d[i].orderGuestEntities.length; j++){ }}
				<div class="clearfloat">
					<ul>
						{{#  if(d[i].orderGuestEntities[j].guestName){ }}
							{{d[i].orderGuestEntities[j].guestName}}
						{{#  } }}
					</ul>
					<ul>	
						{{#  if(d[i].orderGuestEntities[j].spell){ }}
							{{d[i].orderGuestEntities[j].spell}}
						{{#  } }}
					</ul>
					<ul>
						{{#  if(d[i].orderGuestEntities[j].sex){ }}
							{{d[i].orderGuestEntities[j].sex}}
						{{#  } }}
					</ul>
					<ul>
						{{#  if(d[i].orderGuestEntities[j].birth){ }}
							{{d[i].orderGuestEntities[j].birth}}
						{{#  } }}
					</ul>
					<ul>
						{{#  if(d[i].orderGuestEntities[j].spell){ }}
							{{d[i].orderGuestEntities[j].spell}}
						{{#  } }}
					</ul>
					<ul>
						{{#  if(d[i].orderGuestEntities[j].idCard){ }}
							{{d[i].orderGuestEntities[j].idCard}}
						{{#  } }}
					</ul>
					<ul>
						{{#  if(d[i].orderGuestEntities[j].passport){ }}
							<p onclick="window.open('http://52lvu.cn:8080/hotel/upload{{d[i].orderGuestEntities[j].passport}}')">点击查看图片</p>
						{{#  } }}
					</ul>
				</div>
			{{#  } }}
		{{# } }}
	</div>
	
</script>
<script>
	
    $(".ok").on("click",function () {
        $(".pay").empty().append("<div class='title'>审核状态</div><div class='list'><ul class='cheng'><li class='chenggong'><img src='img/chneggong.png' /><span>您已成功提交订单</span></li><li class='fh'>24小时未付款自动取消订单,去点击付款完成订单</li></ul></div>")
    	setTimeout(function(){
    	    window.location.href = "dingdan.html";
    	},5000)
    })
    $("#qq").load("lib/qq.html");$("#footer").load("lib/footer.html");
layui.use(['layer','upload','laytpl'], function() {   

    var layer = layui.layer,
    	upload = layui.upload,
    	laytpl = layui.laytpl;
    
    var json = JSON.parse(localStorage.getItem("token"));
    
    
    //	对公账号信息	银行卡
    $.ajax({
        type:"post",
        url:"http://52lvu.cn:8080/api/public/getList",
        success : function (result){

            $("#bankinfo").html(result.data[0].detail);
        },error : function (e){
            layer.msg("请求错误,请稍后重试",{icon:2,time:2000})
        }
    });
    
    $("#scpz").on("click",function(){
    	layer.msg("请添加付费凭证",{icon:2,time:2000})
    })
    
    // 上传凭证
    upload.render({
	    elem: '.uploadBtn'
	    ,url: 'http://52lvu.cn:8080/common/api/upload?file_type=receiptPic'
	    ,exts : 'gif|jpg|jpeg|png|bmp|png'
	    ,multiple : false
	    ,data:{
	    	file_type : "receiptPic"
	    }
	    ,auto : true
	    ,choose: function(obj){

        },done: function(res,index){
			if (res.message == "成功") {
				var token = JSON.parse(localStorage.getItem("token"));
				$.ajax({
				    type:"post",
				    url:"http://52lvu.cn:8080/api/order/updateReceiptPicByOrderId",
				    data:{
				        id : wang.getQueryString("orderId"),
				        token : token.token ,
				        receiptPic : res.createFilePath,
				        userId : token.id
				    },success : function (result){
				    	$("#demo2").empty();
		    			$("#demo2").append("<img src='http://52lvu.cn:8080/hotel/upload"+res.createFilePath+"'/>")
		    			
		    			$("#scpz").on("click",function(){
					    	layer.msg("上传凭证成功，请等待审核",{icon:1,time:2000})
							setTimeout(function(){
					    	    window.location.href = "dingdan.html";
					    	},2000)
					    })
				    },error : function (e){
				        layer.msg("请求错误,请稍后重试",{icon:2,time:2000})
				    }
				});
	    	}else{
	    		layer.msg("上传失败",{icon:2,time:2000})
	    	}
	    }
	});
    
    //	酒店信息
    if (wang.getQueryString("id")) {
    	$.ajax({
	        type:"post",
	        url:"http://52lvu.cn:8080/api/hotel/getHotel",
	        data :{
	        	id : wang.getQueryString("id")
	        },
	        success : function (result){

	            if (result.data) {
	            	var data = result.data;
		        	var picList = data.picture.split(";")

		        	for ( i = 0 ; i < picList.length && i < 4 ; i++) {
		        		$("#bannerList").append("<div class='slide' style='width: 225px;'><a><img src='http://52lvu.cn:8080/hotel/upload"+picList[i]+"' /></a></div>")
		        		$("#bannerBtn").append("<div class='slide'><a><img src='http://52lvu.cn:8080/hotel/upload"+picList[i]+"' /></a></div>")
		        	}
		        	
		        	wang.banner(".banner",{
					    autoplay:3000
					});
					
					$("#bannerBtn .slide").on("click",function(){
					    var thisIndex = $(this).index();
					    $("#bannerList").animate({"left":-225*thisIndex+"px"})
					})
	        	}
	         },error:function (){
	         	layer.msg("请求错误！请稍后重试",{icon:2,time:3000});
	         }
	    })
    }
    
    
    // 订单信息
    if (wang.getQueryString("orderId")) {
    	$.ajax({
	        type:"post",
	        url:"http://52lvu.cn:8080/api/order/getOrderByUserId",
	        data:{
	            id : wang.getQueryString("orderId"),
	            userId : json.id,
	            token : json.token
	        },success : function (result){

	        	if (result.resultCode == '104') {
	        		layer.msg("登录超时，请稍后重试",{icon:2,time:2000})
	        		setTimeout(function(){
	        		    window.location.href="login.html";
	        		},2000)
	        	} else{
	        		var data = result.data[0];
					if( data.length < 0 ){
						layer.msg("错误，请重试",{icon:2,time:2000})	
						return false
					};
			    	$("#desc .tit").html(data.hotelName);
			    	$("#desc .list").empty();
			    	$("title").html(data.hotelName)
					$("#roomMoney").parent().append("<ul class='money clearfloat'><li class='fl'>总价</li><li class='fr'>￥"+data.orderPirce+"</li></ul>")
					$("#money").html("￥"+data.orderPirce)
					
		            for (i = 0 ; i < data.orderDetailEntities.length ; i++) {
						$("#desc .list").append("<li class='clearfloat'><p class='fl'>房间类型</p><p class='fr'>"+data.orderDetailEntities[i].roomType+"</p></li>")
	
						$("#chooseList").append("<div class='item"+i+"'></div>");
					}
		            
					$("#desc .list").append("<li class='clearfloat'><p class='fl'>入住时间</p><p class='fr'>"+data.startTime+"</p></li>")
					$("#desc .list").append("<li class='clearfloat'><p class='fl'>离开时间</p><p class='fr'>"+data.endTime+"</p></li>")
		            
		            var infoCont = userInfo.innerHTML ;
			    	var jsonData = result.data;
					

					
			    	laytpl(infoCont).render(jsonData[0].orderDetailEntities, function(html){	
						$("#infoList").html(html);
					});
		            
	            	var roomInfoCont = roomInfo.innerHTML;
		            
					laytpl(roomInfoCont).render(jsonData[0], function(html){	
						$("#roomMoney").html(html);
					});	
	        	}
				
	            
	        },error : function (e){
	            layer.msg("请求错误，请稍后重试",{icon:2,time:2000})
	        }
	    });
    } 
    
    // 订单状态
    if(wang.getQueryString("orderStatus")){
    	var orderStatus = wang.getQueryString("orderStatus");

		if (orderStatus == 0) {
    		$(".pay").hide();
    		$(".confirm").show();
    	}
    	if (orderStatus == 1) {
    		$(".confirm").hide();
        	$(".pay").empty().append("<div class='title'>审核状态</div><div class='list'><ul class='cheng'><li class='chenggong'><img src='img/chneggong.png' /><span>您已成功提交订单</span></li><li class='fh'>请等待管理员审核</ul></div>")
    	}
    	if (orderStatus == 2) {
    		$(".confirm").hide();
        	$(".pay").empty().append("<div class='title'>审核状态</div><div class='list'><ul class='cheng'><li class='chenggong'><img src='img/chneggong.png' /><span>管理员审核成功</span></li><li class='fh'></ul></div>")
    	}
    	if (orderStatus == 3) {
    		$(".confirm").hide();
        	$(".pay").empty().append("<div class='title'>审核状态</div><div class='list'><ul class='cheng'><li class='chenggong'><img src='img/chneggong.png' /><span>您已申请退款</span></li><li class='fh'>请等待管理员审核</ul></div>")
    	}
    	if (orderStatus == 4) {
    		$(".confirm").hide();
        	$(".pay").empty().append("<div class='title'>审核状态</div><div class='list'><ul class='cheng'><li class='chenggong'><img src='img/chneggong.png' /><span>您已退款成功</span></li><li class='fh'>管理员同意退款</ul></div>")
    	}
    	if (orderStatus == 5) {
    		$(".confirm").hide();
        	$(".pay").empty().append("<div class='title'>审核状态</div><div class='list'><ul class='cheng'><li class='chenggong'><img src='img/chneggong.png' /><span>退款失败</span></li><li class='fh'>管理员不同意退款</ul></div>")
    	}
    }else{
		$(".confirm").hide();
	}
})   

</script>